import React, {useEffect, useState} from "react";
import MarkdownEditor from "../../../../components/MarkdownEditor";
import {Button, Form, Input, Modal, Row} from "@douyinfe/semi-ui";
import GlobalHeader from "../../../../components/GlobalHeader";
import {ArticleControllerService, ArticleVo} from "../../../../service";
import {Toast} from '@douyinfe/semi-ui';
import {useSearchParams} from "react-router-dom";
import "./index.css"

const MdUpdateView: React.FC = () => {
    const [value, setValue] = useState('');
    const [visible, setVisible] = useState(false);
    const [formApi, setFormApi] = useState<object>();
    const [searchParams, serSearchParams] = useSearchParams();
    const [title, setTitle] = useState<string>();
    const [prepare,setPrepare]=useState<boolean>(false);
    const [articleVo, setArticleVo] = useState<ArticleVo>({});
    const getFormApi = (formapi: object) => {
        setFormApi(formapi);
    }
    const loadData = async () => {
        const id = parseInt(searchParams.get("id") ?? "0");
        const res = await ArticleControllerService.getArticleById({id: id});
        if (!res.data) {
            Toast.error("内容加载失败：" + res.message);
            return;
        }
        setArticleVo(res.data);
        setTitle(res.data.title);
        setValue(res.data.content || "");
        setPrepare(true);
    }
    const handleSubmit = async () => {
        const res = await ArticleControllerService.updateArticle({
            id: searchParams.get("id"),
            title:title,// @ts-ignore
            ...formApi.getValues(),
            type: "Markdown",
            content: value,

        })
        if (!res.data) {
            Toast.error("提交失败：" + res.message);
            return;
        }
        Toast.info({
            content: "发布成功",
        });
        setVisible(false);
    }
    useEffect(() => {
        loadData();

    }, [])
    return (
        <>
            <GlobalHeader/>

            <div className={"secondChild"}>
                <Button onClick={() => {
                    setVisible(true);
                }}>更新</Button>
            </div>
            {prepare && <div>标题：
                <Input
                    defaultValue={title}
                    onChange={setTitle}
                    style={{
                        width: "50%"
                    }} placeholder={"在此输入标题"}></Input>
            </div>}

            <MarkdownEditor value={value} setValue={setValue}/>

            <Modal
                title="更新"
                visible={visible}
                onOk={() => {
                    handleSubmit()
                }}
                style={{width: 600}}
                onCancel={() => {
                    setVisible(false);
                }}
            >
                <Form
                    getFormApi={getFormApi}
                    initValues={{
                        'status': articleVo.status,
                        'description':articleVo.description,
                    }}
                >
                    <Row>
                        <Form.Select initValue={'public'} field={"status"} label={"访问权限"}>
                            <Form.Select.Option value={'public'} label={"公开"}/>
                            <Form.Select.Option value={'private'} label={"好友可见"}/>
                            <Form.Select.Option value={'share_with_friend'} label={"私密"}/>
                        </Form.Select>
                    </Row>
                    <Row>
                        <Form.TextArea field={'description'} maxCount={512} maxLength={512}/>
                    </Row>
                </Form>
            </Modal>
        </>


    )
}
export default MdUpdateView;
